<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>加载大量数据</title>
	<style>
		.one-load , .async-load , .scroll-load{
			height: 200px;
			overflow-y: scroll;
		}
	</style>
</head>
<body>
	<h1></h1>
	<p>分批次加载（1W条数据）</p>
	<ul class="async-load">
		
	</ul>
	<p>滚动加载数据（1W条数据）</p>
	<ul class="scroll-load">
		
	</ul>
</body>
<script src="../../libs/jquery/1.9.1/jquery.js"></script>
<script>

	// 分次加载
	var total = 10000; // 总条数
	var once = 1000; // 每次加载条数
	var loadCount = total / once; // 加载次数
	var recordCount = 0;
	var ulObj = document.querySelector("ul.async-load");
	function addLi(){
		// 性能优化，创建一个虚拟的dom节点
		var fragment = document.createDocumentFragment();
		for(var index = 0 ; index < once ; index ++){
			var li = document.createElement("li");
			li.innerText = `<li>这是第${recordCount}次加载</li> li${index}`;
			fragment.appendChild(li);
		}
		ulObj.appendChild(fragment);
		recordCount++;
		loop();
	}
	function loop(){
		if(recordCount < loadCount){
			window.requestAnimationFrame(addLi)
		}
	}
	loop();

	// 滚动加载数据
	var scrollUl = document.querySelector("ul.scroll-load");
	var scrollRecordCount = 0;
	function scrollLoad(){
		var boxHeight = $(".scroll-load").height(),
		    total = 10000,
			once = 1000,
			loadCount = total / once;
			loadata(once , scrollRecordCount);
		$(".scroll-load").scroll(function(){
			var realHeight = $(".scroll-load")[0].scrollHeight;
			var scrollHeight = $(this).scrollTop();
			if(boxHeight+scrollHeight + 50 >= realHeight && scrollRecordCount < loadCount){
				// 加载数据
				loadata(once , scrollRecordCount);
			}
		})
	}
	// 加载数据
	function loadata(once , recordCount){
		console.log(recordCount);
		var fragment = document.createDocumentFragment();
		for(var index = 0 ; index < once ; index++){
			var li = document.createElement("li");
			li.innerText = `<li>这是第${recordCount}次加载 li${index}</li>`
			fragment.appendChild(li);
		}
		scrollUl.appendChild(fragment);
		scrollRecordCount++;
	}
	scrollLoad();


	window.onload = () => {
	    const load = Date.now() - performance.timing.navigationStart;
	    $("h1").html(`页面消耗了 ${load} ms`);
	}
</script>
</html>